<template>
  <Layout>
    <Dividetb>
      <template #top>
        <TopBox title="日志管理">
          <FilterSearch
            :placeholder="'请输入搜索关键字'"
            :searchCallBack="searchCallBack"
          />
          <topButtonGroup :buttonList="tbuttonList" />
          <!-- <div></div> -->
        </TopBox>
      </template>
      <template #bottom>
        <div class="tabs_box">
          <el-tabs
            v-model="tabsActiveName"
            class="tabs"
            @tab-click="handleClick"
          >
            <template v-for="(item, index) in tabsList" :key="index">
              <el-tab-pane :label="item.name" :name="item.type">
                <!-- <template #label>
                  <span class="custom-tabs-label">
                    <span>{{ item.text }}</span>
                  </span>
                </template> -->
                <!-- <loginLog ref="loginLogRef" v-if="item.name == '登录日志'" />
                <opeLog ref="opeLogRef" v-if="item.name == '操作日志'" /> -->
                <component :is="item.component" :ref="item.refName" />
              </el-tab-pane>
            </template>
          </el-tabs>
        </div>
      </template>
    </Dividetb>
  </Layout>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { More, Delete } from "@element-plus/icons-vue";
import useTagStore from "@/stores/tagList";
import Layout from "./layout.vue";
import Dividetb from "@/layout/components/dividetb.vue";
import TopBox from "@/components/TopTitleBox/index.vue";
import FilterSearch from "@/components/TopTitleBox/FilterSearch.vue";
import topButtonGroup from "@/components/ButtonGroup/topButtonGroup.vue";
import FileRecovery from "@/assets/customIcon/FileRecovery.vue";
import loginLog from "./loginLog.vue";
import opeLog from "./opeLog.vue";
import { loading } from "@/utils/topButton.js";
defineOptions({ name: "MyBin" });
const route = useRoute();
const tagStore = useTagStore();
const tabsActiveName = ref(1);
const active = ref(0);
const tabsList = [
  {
    type: 1,
    text: "操作日志内容",
    name: "操作日志",
    component: opeLog,
    refName: "opeLogRef",
  },
  {
    type: 2,
    text: "登录日志内容",
    name: "登录日志",
    component: loginLog,
    refName: "loginLogRef",
  },
];
const loginLogRef = ref(null);
const opeLogRef = ref(null);
// 按钮列表
const tbuttonList = ref([
  {
    label: "回退",
    icon: "el-icon-back",
    type: "b2",
    onClick: () => {
      console.log("点击了回退");
      tagStore.historyBack({
        name: route.path,
        breadcrumbName: "系统",
      });
    },
  },
  {
    label: "前进",
    icon: "el-icon-right",
    type: "b2",
    onClick: () => {
      tagStore.historyFoward({
        name: `route.path`,
        breadcrumbName: "系统",
      });
    },
  },
  {
    label: "刷新",
    icon: "el-icon-refresh",
    type: "b2",
    onClick: (e) => {
      loading(e, () => {
        return new Promise((resolve) => {
          // 重新获取列表数据
          //操作日志
          if (tabsActiveName.value == 1) {
            if (opeLogRef.value) {
              opeLogRef.value[0]
                .regainData()
                .then((res) => {
                  ElMessage.success("刷新成功");
                  resolve();
                })
                .catch((err) => {
                  reject();
                });
            }
          } else if (tabsActiveName.value == 2) {
            //登录日志
            if (loginLogRef.value) {
              console.log(loginLogRef.value);
              // 因为是v-for中使用的ref，所以返回的是数组
              loginLogRef.value[0]
                .regainData()
                .then((res) => {
                  resolve();
                })
                .catch((err) => {
                  reject();
                });
            }
          }
        });
      });
    },
  },
  //滔哥说，不允许删除和清空
  // {
  //   label: "删除",
  //   icon: "el-icon-delete",
  //   type: "b2",
  //   onClick: () => {
  //     if (tabsActiveName.value == 1) {
  //       if (opeLogRef.value) {
  //         opeLogRef.value.deleteSelectedLog();
  //       }
  //     } else if (tabsActiveName.value == 2) {
  //       if (loginLogRef.value) {
  //         loginLogRef.value[0].deleteSelectedLog();
  //       }
  //     }
  //   },
  // },
  // {
  //   label: "清空",
  //   icon: "ClearAll",
  //   type: "b2",
  //   onClick: () => {
  //     console.log("清空所有");
  //     if (tabsActiveName.value == 1) {
  //       if (opeLogRef.value) {
  //         // opeLogRef.value.clearData();
  //       }
  //     } else if (tabsActiveName.value == 2) {
  //       if (loginLogRef.value) {
  //         loginLogRef.value[0].clearData();
  //       }
  //     }
  //   },
  // },
]);

const searchCallBack = (word, time) => {
  // console.log("搜索回调", word, time);
  if (tabsActiveName.value == 1) {
    // 搜索操作日志
    if (opeLogRef.value) {
      opeLogRef.value[0].searchLog(word, time);
    }
  } else if (tabsActiveName.value == 2) {
    // 搜索登录日志
    if (loginLogRef.value) {
      loginLogRef.value[0].searchLog(word, time);
    }
  }
};
const handleClick = (tab, event) => {
  console.log(tab, event);
};

onMounted(() => {
  console.log("我的文件夹挂载完成");
});
</script>
<style lang="scss" scoped>
.tableBox {
  :deep(.cell) {
    display: flex;
    justify-content: center;
    font-size: var(--el-font-size-base);
    &:has(.name) {
      justify-content: start;
    }
  }
  :deep(.zhiding) {
    border-bottom: none !important;
  }
  .moreBtn {
    display: none;
    &.active {
      display: flex;
    }
  }
}
.tabs > .el_tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
:deep(.tabs_box) {
  position: relative;
  // .custom-tabs-label {
  //   display: flex;
  //   align-items: center;
  //   .el-icon {
  //     margin-right: 4px;
  //   }
  // }
  // .el-tabs__header {
  //   margin-bottom: 5px;
  // }
  // .el-tabs__item.is-active {
  //   border-bottom: 1px #9954ff solid;
  // }
}
</style>
